<template>
    <el-dialog
        :title="title"
        v-model="visible"
        :footer="null"
        :show-close="closable"
        :width="1200"
        class="switch-app"
        @close="visible = false">
        <el-scrollbar height="550px">
            <div class="app-list">
                <div class="app-item" :class="{'active': currentId == item.clientId}" v-for="item in appData" @click="loginByApp(item)">
                    <div class="icon">{{item.clientName.slice(0, 1)}}</div>
                    <span class="app-name">{{item.clientName}}</span>
                </div>
                <div class="app-item" v-for="_ in appendNum" style="visibility: hidden">
                    <img src="../userDashboard/appDefault.png" alt="" />
                    <span>app name</span>
                </div>
            </div>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, unref, toRefs, Ref, } from 'vue'
import { useUserStore } from '/@/store/modules/user';
import { computed } from '@vue/reactivity';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
// import { useLoginState, LoginStateEnum } from './useLogin';

const tabStore = useMultipleTabStore();
const userStore = useUserStore();
const title = ref('选择应用');
const visible = ref(false);
const appData = computed(() => userStore.getLoginApp?.accessableList || []) as unknown as Ref<any[]>;
const currentId = computed(() => userStore.getLoginApp?.currentId || '');
const lineNumber = 9;
const appendNum = computed(() => appData?.value.length % lineNumber > 0 ? lineNumber - appData?.value.length % lineNumber : 0);

const props = defineProps({
    reload: {
        type: Boolean,
        default: () => false,
    },
    closable: {
        type: Boolean,
        default: () => false,
    }
})
const { reload } = toRefs(props)
const loginByApp = (app) => {
    visible.value = false;
    userStore.setLoginApp({
        currentId: app.clientId,
        clientManagerId: app.clientManagerIds || [],
        accessableList: unref(appData)
    })
    userStore.loginEnd(true, reload.value);
    tabStore.resetState();
}

defineExpose({
    visible
})

</script>

<style lang="less">
.switch-app {
    .app-list {
        margin: 10px;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        align-content: center;
        flex-wrap: wrap;
        .app-item {
            margin: 0 15px 15px 0;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .icon {
                width: 80px;
                height: 80px;
                border-radius: 3px;
                background: rgb(198,71,33);
                font-size: 28px;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 10px;
            }
            span {
                text-align: center;
                width: 70px;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-height: initial;
                -webkit-box-orient: vertical;
            }
            &:hover,&.active {
                @activeColor:  rgb(198,71,33);
                cursor: pointer;
                border-radius: 4px;
                box-shadow: 0 0 4px @activeColor;
                color: @activeColor;
            }
        }
    }
}
</style>